<template>
  <!-- icon： 用户user、角色id-card、权限sitemap -->
  <div class="home">
    <div class="header">
      <div class="user">
        <h1>{{ name }}</h1>
        <p>今天是{{ nowDate }}，祝您工作顺利</p>
      </div>
      <el-card style="width:300px;" shadow="never">
          <template v-if="ip && time">
            <p>上次登录ip：{{ ip }}</p>
            <p>上次登录时间：{{ time }}</p>
          </template>
          <template v-else>
            <p>上次登录ip：首次登录</p>
            <p>上次登录：首次登录</p>
          </template>
      </el-card>
    </div>
    <div class="main">
      <el-card class="card">
        <div class="content">
          <div style="margin-right:20px">
              <font-awesome-icon :icon="['fas','user']" class="icon" />
          </div>
          <div>
            <h1>100</h1>
            <p>用户数量</p>
          </div>
        </div>
      </el-card>

      <el-card class="card">
        <div class="content">
          <div style="margin-right:20px">
              <font-awesome-icon :icon="['fas','id-card']" class="icon" />
          </div>
          <div>
            <h1>8</h1>
            <p>角色数量</p>
          </div>
        </div>
      </el-card>

      <el-card class="card">
        <div class="content">
          <div style="margin-right:20px">
              <font-awesome-icon :icon="['fas','sitemap']" class="icon" />
          </div>
          <div>
            <h1>90</h1>
            <p>权限数量</p>
          </div>
        </div>
      </el-card>
    </div>
   
   <div class="footer">
    <el-card style="width: 100%;">
      <div class="content">
        <img src="../../assets/logo.png" width="20%">
        <p>2023-2026 Eleming. All rights reserved.</p>
      </div>
    </el-card>
   </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { Message } from "element-ui";
import { formatTime1,formatTime2 } from "@/utils/time";

export default {
  name: "HomeView",
  data(){
    return{
      name: "",
      id: "",
      time: "",
      ip: ""
    }
  },
  async mounted(){
    await this.getUserInfo();
    await this.getLastLoginInfo();
  },
  methods:{
    ...mapActions("loginStore",{ getInfo: "info"}),
    ...mapActions("userStore",{ getUserLoginInfo: "getUserLoginInfo"}),
    
    async getLastLoginInfo(){
      const result = await this.getUserLoginInfo({id:this.id});
      this.time = formatTime1(result.data.time) ?? "";
      this.ip = result.data.ip ?? "";
    },
    async getUserInfo(){
      try{
        const data = await this.getInfo(this.userObj);
        this.name = data.name;
        this.id = data.id;
      }catch(error){
        Message({
            type: "error",
            message:error.message
        });
      }
    }
  },
  computed:{
    ...mapState("loginStore",{ userObj: "user"}),
    nowDate(){
      return formatTime2();
    }
  }
}
</script>

<style scoped lang="scss">
.home{
  height: 100vh;
  width: 100%;
  .header{
    display: flex;
    justify-content: space-between;
    .user{
      h1{
        color: $main_color;
        font-size: 2.5rem;
        margin: 5px 0;
      }
    }
  }
  .main{
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
    .card{
      padding: 20px;
      width: 25%;
      height: 120px;
      display: flex;
      align-items: center;
      margin: 0 20px;
      .content{
        display: flex;
        align-items: center;
        .icon{
          color:$main_color;
          font-size: 4rem;
        }
      }
    }
  }
  .footer{
    .content{
      display: flex; 
      flex-direction: column;
      align-items: center;
      p{
        margin: 50px 0 10px 0;
      }
    }
  }
}
</style>